<template>
    <div>
        <BreadList :list="['Home', 'Content', { 'name': 'Blog' }, 'Edit']"></BreadList>
        <a-card>
            <h3 class="text-center">欢迎来到帖子编辑页面</h3>
            <a-divider></a-divider>

            <a-form :model="editForm">
                <a-form-item label="帖子标题" has-feedback v-bind="validateInfos.blogTitle">
                    <a-input v-model:value="editForm.blogTitle" />
                </a-form-item>
                <a-form-item label="帖子封面" has-feedback v-bind="validateInfos.blogImage">
                    <a-image @click="handleUploadCover" :width="100" :height="100" :src="editForm.blogImage"
                        fallback="" />
                </a-form-item>
                <a-form-item label="帖子类型" has-feedback v-bind="validateInfos.blogSource">
                    <a-select v-model:value="editForm.blogSource" placeholder="please select your 帖子类型" style="width: 80px">
                        <a-select-option value="1">原创</a-select-option>
                        <a-select-option value="2">转载</a-select-option>
                        <a-select-option value="3">翻译</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="帖子描述" has-feedback v-bind="validateInfos.blogDescription">
                    <a-textarea has-feedback v-model:value="editForm.blogDescription" />
                </a-form-item>
                <md-editor-v3 v-model="editForm.blogContent" />
                <a-form-item class="error-infos" :wrapper-col="{ span: 14, offset: 8 }" v-bind="">
                    <a-button type="primary" @click.prevent="onSubmit">发布</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { InboxOutlined } from "@ant-design/icons-vue";
import { message, Form } from 'ant-design-vue';
import { useRoute, useRouter } from 'vue-router';
import { getBlogDetail, addBlog, updateBlog } from '@/api/Content';
import { ResultCodeEnum } from '@/enums';
import { useAdminStore } from '@/store/AdminStore';

const useForm = Form.useForm;
const route = useRoute();
const router = useRouter();
const adminStore = useAdminStore();

const modalVisible = ref(false);
const editStatus = ref(false);

const editForm = ref({
    blogTitle: "",
    blogImage: "http://image.gorit.cn/2020-09-27_5760573523191500983_1.jpg",
    blogDescription: "",
    blogContent: "",
    blogSource: "",
    userId: '',
});

const { validate, validateInfos } = useForm(
    editForm,
    ref({
        blogTitle: [
            {
                required: true,
                message: '请输入博客标题',
                trigger: 'blur'
            },
            {
                min: 3,
                max: 64,
                message: '博客的标题长度必须为 3 到 64',
                trigger: 'blur'
            },
        ],
        blogImage: [
            {
                required: false,
                message: '图片',
                trigger: 'blur'
            }
        ],
        blogSource: [
            {
                required: true,
                message: '博客来源不允许为空',
                trigger: 'blur'
            }
        ],
        blogDescription: [
            {
                required: true,
                message: '博客描述不允许为空',
                trigger: 'blur'
            }
        ]
    }),
);

onMounted(() => {
    const blogId = route.query.blogId as unknown as string;
    if (blogId !== undefined) {
        // console.log(blogId)
        editStatus.value = true;
        getBlogById(blogId);
    }

    editForm.value.userId = adminStore.getAdminId();
    //   let currentUser = JSON.parse(sessionStorage.getItem("currentUser"));
    //   if (currentUser !== null) {
    //     editForm.value.userId = currentUser.userId;
    //     uploadUrl.value = uploadUrl.value + editForm.value.userId;
    //   }
});
const getBlogById = async (id: string) => {
    const { data } = await getBlogDetail(id);
    editForm.value = data;
    console.log(editForm.value.blogContent)
};

// 上传封面的对话框
const handleUploadCover = () => {
    modalVisible.value = true;
};
// 表单提交
const onSubmit = () => {
    validate()
        .then(async () => {

            // console.log(toRaw(editForm.value.blogContent));
            if (!editStatus.value) {
                const { code, msg } = await addBlog(toRaw(editForm.value));
                if (code !== ResultCodeEnum.CREATE_SUCCESS) message.error(msg);
                message.success(msg);
                router.push({name: 'Blog'});
            } else {
                await updateBlog(toRaw(editForm.value))
                router.back()
            }

        }).catch((err: any) => {
            console.log("error", err);
        });
};

</script>



